<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对布局</title>
    <style>
      #parent{
        width: 300px;
        height: 300px;
        border: solid 1px orange;
        margin: 0 auto;
        position: relative;
      }
      img{
        width: 100%;
        height: 300px;
      }
      #child{
        width: 100%;
        height: 18px;
        background-color: rgba(0,0,255,0.2);
        position: absolute;
        bottom: 0;
        text-align: center;
        font-size: 13px;
      }

    </style>
</head>
<body>
<div id="parent">
  <img src="1.png" alt="没有该图片">
  <div id="child">
    <a href="#" >Nozomi Hazuki </a>
  </div>
</div>

</body>
</html>